<script setup lang="ts">
import {ref} from "vue";
import {indexSwiper} from "@/http/home";
import router from "@/router";
//搜索框
const value = ref('');
function search(){
    router.push({
        path:'/search'
    })
}
//轮播图
// 轮播图请求
// 统一维护， 通过配置文件维护，通过配置JS文件维护
let baseUrl = import.meta.env.VITE_BASE_URL

let swiperList = ref<any[]>([])
indexSwiper({pageNum: 1, pageSize: 10}).then(res => {
    // console.log(res)
    // nextTick(()=>{
    if (res.code === 200) {
        swiperList.value = res.rows
        // console.log(swiperList)
    }
    // })

});


</script>

<template>
    <div>
        <!--        搜索-->
        <div class="search">

            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="search"/>

        </div>
        <!--        轮播图-->
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in swiperList" :key="item.id">
                    <img :src="baseUrl+item.picture" alt="图片">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--        健康中心介绍-->
        <div class="health"><router-link :to='{path:"/health"}' style="color: #323233">健康中心介绍</router-link></div>
    </div>
</template>

<style scoped lang="less">
.swiper {
  height: 25vh;

  .my-swipe .van-swipe-item {
    height: 25vh;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #9e75f5;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

//    健康中心介绍
.health {
  width: 95%;
  margin: 10px auto 0;
  height: 5vh;
  background-color: #CEAFF8;
  text-align: center;
  line-height: 5vh;
    border-radius: 6px;
}

</style>